<template>
  <div class="outBox" id="MainPage">
    <el-container style="height: 100%" direction="vertical">
      <el-main>
        <div>
          <div style="
            display: flex;
            justify-content: center;
            margin-top: 10px;
          ">
            <el-input
                style="width: 300px; margin-right: 10px;"
                prefix-icon="el-icon-search"
                v-model="gname"
                :disabled="showSortSearchVisible"
                @keydown.enter.native="initGoodsInfo"
                clearable
                @clear="initGoodsInfo"
                placeholder="请输入商品名称进行搜索..."
            >
            </el-input>
            <el-button
                :disabled="showSortSearchVisible"
                type="primary"
                icon="el-icon-search"
                @click="initGoodsInfo"
                style="background-color: #eb5a17ec; border: none"
                round
            >搜索
            </el-button>
            <el-button
                type="primary"
                @click="showSortSearchVisible = !showSortSearchVisible"
                style="background-color: #eb5a17ec; border: none"
                round
            >
              <i
                  :class="
                  showSortSearchVisible
                    ? 'fa fa-angle-double-up'
                    : 'fa fa-angle-double-down'
                "
                  aria-hidden="true"
              ></i>
              商品分类搜索</el-button
            >
          </div>
          <div
              v-show="showSortSearchVisible"
              style="
              border: 1px solid #eb5a17ec;
              border-radius: 10px;
              box-sizing: border-box;
              padding: 10px;
              margin: 20px 300px;
            "
          >
            <el-select
                v-model="searchValue.gsort1"
                placeholder="一级分类"
                @change="changeSelect"
            >
              <el-option
                  v-for="(item,index) in sort1"
                  :key="index"
                  :label="item"
                  :value="item"
              >
              </el-option>
            </el-select>
            二级分类：
            <el-select
                v-model="searchValue.gsort2"
                placeholder="二级分类"
            >
              <el-option
                      v-for="(item,index) in sort2"
                      :key="index"
                      :label="item"
                      :value="item"
              >
              </el-option>
            </el-select>
            <el-button
                @click="initGoodsInfo('sortSearch')"
                type="primary"
                icon="el-icon-search"
                style="background-color: #eb5a17ec; border: none"
                round
            >搜索</el-button
            >
            <el-button @click="initGoodsInfo">取消</el-button>
          </div>
        </div>
        <div class="main-show">
          <div style="width: 60%;margin-left: 100px" >
            <el-carousel
                indicator-position="outside"
                :height="img_height + 'px'"
            >
              <el-carousel-item v-for="items in dataList" :key="items">
                <img width="100%" :src="items" @load="img_load" ref="img_ref" />
              </el-carousel-item>
            </el-carousel>
          </div>
          <el-card class="main-card">
            <div>
              <div v-if="user">
                <el-image
                    class="main-card-img"
                    :src="user.userFace"
                ></el-image>
                <div style="margin-left:58%; transform: translate(-50%,-50%);">Hi!{{user.unickName}}</div>
              </div>
              <div v-if="!user">
                <el-image
                    class="main-card-img"
                    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01e0ae58ae3d72a801219c77fadb52.png%401280w_1l_2o_100sh.png&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642097892&t=abfdfb094a9536f5b73645b0d74aec19"
                ></el-image>
                <el-button
                    type="primary"
                    style="background-color: #eb5a17ec; border: none"
                    round
                    @click="gologin"
                >登录</el-button
                >
                <el-button
                    type="primary"
                    style="background-color: #eb5a17ec; border: none"
                    round
                    @click="gozhuce"
                >注册</el-button
                >
                <el-button
                    type="primary"
                    style="background-color: #eb5a17ec; border: none"
                    round
                    @click="gozhuce"
                >开店</el-button
                >
              </div>
              <div style="margin-top: 70px; margin-left: 25px">
                <el-button
                    type="primary"
                    style="background-color: #eb5a17ec; border: none"
                    round
                >购物车</el-button
                >
                <el-button
                    type="primary"
                    style="background-color: #eb5a17ec; border: none"
                    round
                    @click="mygoods"
                >我的订单</el-button
                >
              </div>
            </div>
          </el-card>
        </div>
      </el-main>

      <el-footer>
        <div class="goods">
          <div class="demo-image" v-for="item in goodsinfo" :key="item.id">
            <div @click="godetail(item)">
              <div>
                <el-image
                    style="
                    width: 200px;
                    height: 200px;
                    border:radius: 20px;
                    margin-left: 0px;
                  "
                    :src="item.gimgUrl"
                >
                </el-image>
              </div>
              <div>{{ item.gname }}</div>
              <div
                  style="font-size: 25px; font-family: 华文行楷; color: #eb5a17ec"
              >
                ￥{{ item.gprice }}
              </div>
            </div>
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "MainPage",
  data() {
    return {
      searchValue:{
        gsort1:'',
        gsort2:''
      },
      showSortSearchVisible:false,
      sort1: ['女装男装', '鞋类箱包',  '护肤彩妆', '汇吃美食', '手机数码'],
      sort1obj:{'女装男装':['1'], '鞋类箱包':['2'],  '护肤彩妆':['3'], '汇吃美食':['4'], '手机数码':['智能手机','键盘','游戏本']},
      sort2:[],
      title:'',
      dataList: [
        "https://i1.mifile.cn/a4/xmad_15535933141925_ulkYv.jpg",
        "https://i1.mifile.cn/a4/xmad_15532384207972_iJXSx.jpg",
        "https://i1.mifile.cn/a4/xmad_15517939170939_oiXCK.jpg",
        "https://i1.mifile.cn/a4/xmad_15338857534213_DaEjU.jpg",
        "https://i1.mifile.cn/a4/xmad_1535103285321_fPlOK.jpg",
        "https://i1.mifile.cn/a4/xmad_15349329950127_PVrya.jpg",
        "https://i1.mifile.cn/a4/xmad_15338982677936_eQTJk.jpg",
      ],
      form: {
        uname: "",
        uaddress: "",
        uphoneNum: "",
        id: null,
        ostatus: "",
      },
      goodsinfo: {},
      gname: '',
      indexs: 0,
    };
  },
  computed:{
    routes(){
      return this.$store.state.routes;
    },
    user(){
      return this.$store.state.currentUser;
    }
  },
  mounted() {
    this.initGoodsInfo();
  },
  methods: {
    changeSelect() {
      // 清空手机型号内容
      this.searchValue.gsort2 = ''

      // 遍历手机品牌的下拉选项数组
      for (const k in this.sort1) {
        // 手机品牌内容 是否等于 手机品牌的下拉选择数组中的某一项
        if (this.searchValue.gsort1 === this.sort1[k]) {
          this.sort2 = this.sort1obj[this.searchValue.gsort1]
        }
      }
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    godetail(item) {
      this.$router.push({path: '/goodsdetails' , query:{msg:JSON.stringify(item)}});
    },
    img_load() {
      console.log(this.$refs.img_ref[0].height, "img_height");
      this.img_height = this.$refs.img_ref[0].height;
      console.log(this.$refs.img_ref[0].width, "img_width");
    },
    gologin() {
      this.$router.push("/userlogin");
    },
    gozhuce() {
      this.$router.push("/register");
    },
    mygoods() {
      this.$router.push("/userhisorder");
    },
    initGoodsInfo(type){
      this.loading = true;
      let url = '/viewGood_C/?=';
      if (type && type == 'sortSearch'){
        if (this.searchValue.gsort1){
          url += '&gSort1='+this.searchValue.gsort1;
        }
        if (this.searchValue.gsort2){
          url += '&gSort2='+this.searchValue.gsort2;
        }
      }else {
        url += '&gName='+this.gname;
      }
      console.log(url);
      this.getRequest(url).then(resp=>{
        this.loading = false;
        if (resp){
          console.log(resp);
          this.goodsinfo = resp;
        }
      })
    },

  },
};
</script>

<style>
html,
body,
#app,
.outBox,
.el-container {
  padding: 0px;
  margin: 0px;
  height: 100%;
}
.main-show {
  margin-top: 50px;
  margin-left: 50px;
  display: flex;
  padding: 0 15px;
  box-sizing: border-box;
  align-items: flex-start;
}
.main-card {
  margin-left: 75px;
  height: 310px;
  width: 300px;
}
.main-card-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-left: 50%;
  padding: 10px;
  box-sizing: border-box;
  transform: translate(-50%, -30%);
}

.goods {
  align-content: flex-start;
  display: flex;
  flex-wrap: wrap;
}
.demo-image {
  margin-left: 20px;
  cursor: pointer;
}

.el-footer {
  align-content: flex-start;
  display: flex;
  margin-left: 50px;
  margin-right: 50px;
}
</style>
